<template>
  <div class="form-query-container">
    <el-form
      ref="queryForm"
      :model="formData"
      label-width="80px"
      inline
      class="query-form"
    >
      <!-- 日期范围选择器 -->
      <!-- <el-form-item label="日期范围" prop="dateRange">
        <el-date-picker
          v-model="formData.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item> -->

      <!-- 下拉选择器 -->
      <el-form-item label="目标类型" prop="targetType">
        <el-select
          v-model="formData.targetType"
          placeholder="请选择目标类型"
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_target_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <!-- 输入框 -->
      <el-form-item label="批号" prop="batchNo">
        <el-input
          v-model="formData.batchNo"
          placeholder="请输入批号"
          clearable
        />
      </el-form-item>

      <!-- 按钮组 -->
      <el-form-item class="form-buttons">
        <el-button type="primary" @click="handleQuery" class="query-btn">
          <i class="fas fa-search"></i> 查询
        </el-button>
        <el-button @click="handleReset" class="reset-btn">
          <i class="fas fa-undo"></i> 清除
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "FormQuery",
  props: {
    // 初始表单值
    initialFormData: {
      type: Object,
      default: () => ({
        dateRange: [],
        targetType: "",
        batchNo: "",
      }),
    },
  },
  dicts: ["sys_target_type"],
  data() {
    return {
      formData: { ...this.initialFormData },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    initialFormData: {
      handler(newVal) {
        this.formData = { ...newVal };
      },
      deep: true,
    },
  },
  methods: {
    // 查询方法
    handleQuery() {
      this.$emit("query", {
        targetType: this.formData.targetType,
        batchNo: this.formData.batchNo,
        startTime: this.formData.dateRange[0],
        endTime: this.formData.dateRange[1],
      });
    },

    // 清除方法
    handleReset() {
      this.formData = {
        dateRange: [],
        targetType: "",
        batchNo: "",
      };
      this.$nextTick(() => {
        this.$emit("reset");
      });
    },

    // 外部调用的清除方法
    resetForm() {
      this.handleReset();
    },

    // 获取当前表单数据
    getFormData() {
      return { ...this.formData };
    },
  },
};
</script>

<style lang="scss" scoped>
.form-query-container {
  border-radius: 10px;
  padding: 20px;

  .query-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    ::v-deep .el-form-item {
      margin-bottom: 0;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }

      .el-form-item__label {
        color: #7fdbff;
        font-weight: 400;
        padding-right: 10px;
      }
    }

    .form-buttons {
      margin-left: auto;
      ::v-deep .el-form-item__content {
        display: flex;
      }
    }

    .query-btn,
    .reset-btn {
      padding: 10px 20px;
      border-radius: 4px;
      font-weight: 500;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .query-btn {
      background: linear-gradient(135deg, #005da5, #0088cc);
      border: none;
      color: white;

      &:hover {
        background: linear-gradient(135deg, #0088cc, #00aaff);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .reset-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(13, 138, 188, 0.5);
      color: #7fdbff;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 138, 188, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }

    ::v-deep .el-range-editor {
      background: rgba(13, 138, 188, 0.1);
      border: 1px solid rgba(13, 138, 188, 0.3);
      border-radius: 4px;

      .el-range-input {
        background: transparent;
        color: #e0f7ff;
      }

      .el-range-separator {
        color: #7fdbff;
      }

      .el-range__icon,
      .el-range__close-icon {
        color: #7fdbff;
      }
    }

    ::v-deep .el-select,
    ::v-deep .el-input {
      width: 220px;

      .el-input__inner {
        background: rgba(13, 138, 188, 0.1);
        border: 1px solid rgba(13, 138, 188, 0.3);
        color: #e0f7ff;
        border-radius: 4px;
        height: 36px;
        line-height: 36px;

        &::placeholder {
          color: rgba(127, 219, 255, 0.6);
        }
      }

      .el-input__suffix {
        color: #7fdbff;
      }
    }

    ::v-deep .el-select-dropdown {
      background: rgba(8, 20, 47, 0.9);
      border: 1px solid rgba(13, 138, 188, 0.5);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);

      .el-select-dropdown__item {
        color: #7fdbff;

        &:hover {
          background: rgba(13, 138, 188, 0.3);
        }

        &.selected {
          color: #00f2fe;
          background: rgba(13, 138, 188, 0.2);
        }
      }
    }
  }

  @media (max-width: 1200px) {
    .query-form {
      flex-direction: column;
      align-items: stretch;

      ::v-deep .el-form-item {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;

        .el-form-item__content {
          width: 100%;
        }
      }

      .form-buttons {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        margin-left: 0;
      }
    }
  }
}
</style>